<template>
  <div class="todo-trash todo-page">
    <div class="todo-trash-container todo-page-container">
      <div class="header">
        <div class="left-action">
          <div class="expand">
            <!-- <i class="ri-menu-unfold-3-line"></i> -->
            <!-- <i class="ri-menu-unfold-4-line"></i> -->
          </div>
          <div class="title">垃圾桶</div>
        </div>
        <div class="right-action">
          <div class="more">
            <!-- <i class="ri-more-2-line"></i> -->
          </div>
        </div>
      </div>

      <div class="container">
        <div v-if="store.getTodoGroupCount('垃圾桶')" class="task-list">
          <div
            @click="handleTodoItemClick(item)"
            @contextmenu="showRightMenu($event, item)"
            class="task-item"
            v-for="item in store.trashList"
            :key="item.id"
          >
            <CheckBox
              @click="handleTodoDoneToggle(item)"
              :disabled="true"
              class="checkbox"
              v-model:checked="item.isDone"
            ></CheckBox>
            <input type="text" v-model="item.title" placeholder="无标题" readonly />
            <div class="task-item-right">
              <DatePicker
                @change="handleDateChange($event, item)"
                @click.stop
                :disabled="true"
                :value="dayjs(item.deadlineDate)"
                :format="customFormat"
                :class="
                  dayjs(item.deadlineDate).isBefore(dayjs(), 'day')
                    ? 'is-expired date-picker todo-date-picker'
                    : 'date-picker todo-date-picker'
                "
                placeholder=""
                :allow-clear="false"
              >
                <template #suffixIcon> </template>
              </DatePicker>
            </div>
          </div>
        </div>
        <Empty v-else :icon="emptyIcon" title="垃圾桶很整洁" text="没有已删除的任务"></Empty>
      </div>
    </div>
    <TodoContent :disable="true" @is-done-toggle="handleTodoDoneToggle"></TodoContent>
    <TodoRightMenu
      :menus="rightMenus"
      @action="handleMenuAction"
      ref="todoRightMenuRef"
    ></TodoRightMenu>
  </div>
</template>

<script setup lang="ts">
import CheckBox from '@renderer/components/CheckBox.vue'
import TodoContent from '@renderer/views/TodoContent.vue'
import todoStore from '@renderer/store/todo'
import Empty from '@renderer/components/Empty.vue'
import emptyIcon from '@renderer/assets/icon/app/暂无项目.png'
import { ref } from 'vue'
import dayjs from 'dayjs'
import { DatePicker } from 'ant-design-vue'
import TodoRightMenu from '@renderer/components/rightMenu/TodoRightMenu.vue'

const store = todoStore()

const currentTodoItem = ref<TodoItem>()

const todoRightMenuRef = ref()

const rightMenus = [
  {
    name: '删除',
    icon: 'ri-delete-bin-5-line',
    action: 'delete'
  },
  {
    name: '恢复',
    icon: 'ri-device-recover-fill',
    action: 'restore'
  }
]

const customFormat = (value) => {
  const today = dayjs().startOf('day')
  const targetDate = value.startOf('day')
  const diffDays = targetDate.diff(today, 'day')

  if (diffDays === 0) {
    return `今天`
  }
  return `${value.format('M月D日')}`
}

const handleDateChange = (date: any, item: TodoItem) => {
  item.deadlineDate = date
    .toDate()
    .toLocaleString('zh-CN', {
      year: 'numeric',
      month: '2-digit',
      day: '2-digit',
      hour: '2-digit',
      minute: '2-digit',
      second: '2-digit',
      hour12: false
    })
    .replace(/\//g, '-')
  window.api.updateTodoData({
    ...item
  })
}

const handleTodoItemClick = (todoItem: TodoItem) => {
  store.todo = todoItem
}

const handleTodoDoneToggle = (todoItem: TodoItem) => {
  window.api.updateTodoData({
    ...todoItem
  })
}

const showRightMenu = (e: MouseEvent, todoItem: TodoItem) => {
  e.preventDefault()
  e.stopPropagation()
  currentTodoItem.value = todoItem
  if (todoRightMenuRef.value) {
    todoRightMenuRef.value.showMenu(e)
  }
}

const handleMenuAction = (action: string) => {
  if (!currentTodoItem.value) {
    return
  }
  switch (action) {
    case 'delete':
      store.handleDeleteTrashTodo(currentTodoItem.value.id)
      break
    case 'restore':
      store.restoreTrashData(currentTodoItem.value.id)
      break
    default:
      break
  }
}
</script>

<style scoped>
.todo-trash {
  .task-item {
    opacity: 0.7;
  }
}
</style>
